<template lang="">
  <div class="favorties">
    <el-tabs tab-position="top" style="height: 200px">
      <el-tab-pane label="二手闲置">
        <!-- 右侧物品展示 -->
        <div class="good">
                    <!-- 商品列表 -->
                    <div class="items" >
                        <div class="item" v-for="(item, index) in ldleItems" :key="index" >
                            <div @click="toIdleDetails(item)" class="img">
                                <img v-if="item.plist" :src="item.plist[0]" alt="card">
                                <div>
                                    <img src="@/assets/images/svg/star.svg" alt="">
                                    <strong> {{item.hot}}</strong>
                                </div>
                            </div>
                            <div class="info">
                                <div class="name"><span style="font-size: 14px;font-weight:400;color:#795ab5;">#{{item.tag}}#</span> {{item.itemsName}}</div>
                                <div>{{item.itemsDesc.length>13?item.itemsDesc.substring(0,10)+'...':item.itemsDesc }}</div>
                                <div class="price_newPrice">
                                    <span class="price">￥{{item.expectPrice}}</span>
                                </div>
                                <div><i class="el-icon-time"></i> {{item.issueTime}}</div>
                                <div class="buy_heart">
                                    <el-button @click="deleteByIdle(item)" style="width: 205px;" type="danger">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="page">
                        <el-pagination @size-change="handleSizeChangeIdle" @current-change="handleCurrentChangeIdle"
                            :current-page="searchIdleForm.current" :page-sizes="[8, 16, 32, 64]" :page-size="searchIdleForm.size"
                            layout="total, sizes, prev, pager, next, jumper" :total="searchIdleForm.total">
                        </el-pagination>
                    </div>
                </div>
      </el-tab-pane>
      <el-tab-pane label="失物招领">
        <div class="lostItems">
            <div class="lostItem" v-for="(item, index) in lostItems" :key="index" >
                <div class="info">
                    <div @click="toLostDetails(item)" class="top">
                        <el-tag style="font-weight: bolder;" v-if="item.cardType=='寻找失主'" type="success" effect="dark">{{item.cardType}}</el-tag>
                        <el-tag style="font-weight: bolder;" v-if="item.cardType=='丢失物品'" type="danger" effect="dark">{{item.cardType}}</el-tag>
                        <span class="span"><i class="el-icon-view"></i> {{item.glanceCnt}}</span>
                    </div>
                    <div @click="toLostDetails(item)" class="desc">
                        <p>#{{item.tag}}# &nbsp;<span style="font-size:13px;font-weight:400;">{{item.itemsName}}</span></p>
                    </div>
                    <div class="desc2">
                        <p>{{item.itemsDesc.length>16 ? item.itemsDesc.substring(0,12)+"...":item.itemsDesc}}</p>
                    </div>
                    <img v-if="item.plist" :src="item.plist[0]" alt="点击查看详情"></img>
                    <div class="issueTime">
                        <i class="el-icon-time"></i> 发布时间: {{item.issueTime}}
                    </div>
                    <div class="buy_heart">
                        <el-button @click="deleteByLost(item)" style="width: 205px;" type="danger">删除</el-button>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.current" :page-sizes="[8,16,32,64]" :page-size="searchForm.size"
                layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total">
            </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="资源共享">
        <!-- 右侧物品展示 -->
        <div class="good2">
                <!-- 商品列表 -->
                <div class="items2" >
                    <div class="item2" v-for="(item, index) in resItems" :key="index" >
                        <div @click="toResDetails(item)" class="img2">
                            <img v-if="item.plist" :src="item.plist[0]" alt="card">
                            <div>
                                <img src="@/assets/images/svg/star.svg" alt="">
                                <strong> {{item.heat}}</strong>
                            </div>
                        </div>
                        <div class="info2">
                            <div class="name2"><span style="font-size: 14px;font-weight:400;color:#795ab5;">#{{item.tag}}#</span> {{item.resourceDesc.length>13?item.resourceDesc.substring(0,10)+'...':item.resourceDesc }} </div>
                            <div class="price_newPrice2">
                                <span class="price2"><i class="el-icon-paperclip"></i>:{{item.recourseLink}}</span>
                            </div>
                            <div><i class="el-icon-time"></i> {{item.issueTime}}</div>
                            <div class="buy_heart2">
                                <span class="aaa"><i class="el-icon-view"></i>浏览:{{item.glanceCnt}}</span>
                                <span class="aaa"><i class="el-icon-chat-line-round"></i>评论:{{item.glanceCnt}}</span>
                                <span class="aaa"><i class="el-icon-thumb"></i>点赞:{{item.likeCnt}}</span>
                            </div>
                            <div class="buy_heart">
                                <el-button @click="deleteByRes(item)" style="width: 205px;" type="danger">删除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="page2">
                    <el-pagination @size-change="handleSizeChangeRes" @current-change="handleCurrentChangeRes"
                        :current-page="searchResForm.current" :page-sizes="[6, 12, 18, 24]" :page-size="searchResForm.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="searchResForm.total">
                    </el-pagination>
                </div>
            </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { pageHistory,deleteLost } from "../../utils/lost.js";
import { pageIdleHistory,deleteIdle } from "../../utils/idle.js";
import { pageResHistory,deleteRes} from "../../utils/res.js";

export default {
  data () {
    return {
      lostItems: [],
      ldleItems: [],
      resItems: [],
      title: '',
      
      searchForm: {
          current: 1,
          size: 8,
          total: 0
      },
      searchIdleForm: {
          current: 1,
          size: 8,
          total: 0
      },
      searchResForm: {
          current: 1,
          size: 8,
          total: 0
      },
      params: {
          userId: "",
          token: "",
      },
    };
  },
  mounted() {
      const {
          title
      } = this.$router.app._route.meta
      this.title = title
  },
  created() {
      this.params.userId = localStorage.getItem("user");
      this.params.token = this.$cookies.get("token");
      this.searchLost();
      this.searchIdle();
      this.searchRes();
  },
  methods: {
      toLostDetails(val) {
          this.$router.push({
              name: 'lostDetails',
              query: {
                  id: val.id
              }
          })
      },
      toIdleDetails(val) {
          this.$router.push({
              name: 'details',
              query: {
                  id: val.id
              }
          })
      }, 
      toResDetails(val) {
          this.$router.push({
              name: 'forgetpsw',
              query: {
                  id: val.id
              }
          })
      },
      handleCurrentChange(val) {
          this.searchForm.current = val
          this.searchLost()
      },
      handleCurrentChangeIdle(val) {
          this.searchIdleForm.current = val
          this.searchIdle();
      },
      handleCurrentChangeRes(val) {
          this.searchResForm.current = val
          this.searchRes();
      },
      handleSizeChange(val) {
          this.searchForm.size = val
          this.searchLost()
      },
      handleSizeChangeIdle(val) {
          this.searchIdleForm.size = val
          this.searchIdle()
      },
      handleSizeChangeRes(val) {
          this.searchResForm.size = val
          this.searchRes();
      },
      searchLost() {
        pageHistory(this.searchForm,this.params).then(res=>{
              if(res.data.code==200){
                  this.lostItems = res.data.data.records;
                  this.searchForm.current = res.data.data.current;
                  this.searchForm.size = res.data.data.size;
                  this.searchForm.total = res.data.data.total;
              }else{
                  this.$message.error(res.data.msg);
              }
          })
      },
      searchIdle() {
        pageIdleHistory(this.searchIdleForm,this.params).then(res=>{
              if(res.data.code==200){
                  this.ldleItems = res.data.data.records;
                  this.searchIdleForm.current = res.data.data.current;
                  this.searchIdleForm.size = res.data.data.size;
                  this.searchIdleForm.total = res.data.data.total;
              }else{
                  this.$message.error(res.data.msg);
              }
          })
      },
      searchRes() {
        pageResHistory(this.searchResForm,this.params).then(res=>{
              if(res.data.code==200){
                  this.resItems = res.data.data.records;
                  this.searchResForm.current = res.data.data.current;
                  this.searchResForm.size = res.data.data.size;
                  this.searchResForm.total = res.data.data.total;
              }else{
                  this.$message.error(res.data.msg);
              }
          })
      },
      deleteByIdle(item){
        this.$confirm('确定要删除吗？')
                .then(_ => {
                    deleteIdle(item,this.params).then(res=>{
                        if(res.data.code==200){
                            this.$message.success(res.data.msg);
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                    this.searchIdle();
                }) .catch(_ => {});
      },
      deleteByLost(item){
        this.$confirm('确定要删除吗？')
                .then(_ => {
                    deleteLost(item,this.params).then(res=>{
                        if(res.data.code==200){
                            this.$message.success(res.data.msg);
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                    this.searchLost();
                }) .catch(_ => {});
      },
      deleteByRes(item){
        this.$confirm('确定要删除吗？')
                .then(_ => {
                    deleteRes(item,this.params).then(res=>{
                        if(res.data.code==200){
                            this.$message.success(res.data.msg);
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                    this.searchRes();
                }) .catch(_ => {});
      }
      
  },
};
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
